<template>
<!-- 收藏 item -->
<div class="collect-item">
    <div class="top">
        <div class="title" @click="go">{{title}}</div>
        <div class="time-and-icon">
            {{(new Date(time)).pattern("yyyy-MM-dd")}}
            &nbsp;
            <i class="iconfont primary" @click="cancelCollect">&#xe62b;</i>
        </div>
    </div>

    <div class="tags" v-if="tagList">
        <el-tag 
        type="info" 
        v-for="item in tagList" 
        :key="item[tagName]"
        size="mini"
        >
            {{item[tagName]}}
        </el-tag>
    </div>
</div>
    
</template>

<script>
import TOOLBAR_MIXIN from '@components/sys/item-tool-bar/mixins/index';

export default {
    mixins: [TOOLBAR_MIXIN],
    props: {
        data: {
            type: Object,
            default: (() => {})
        },
        title: {
            type: String,
            default: ""
        },
        time: {
            type: [String,Number],
            default: "",
        },
        tagList:{
            type: [Array,String,Boolean],
            default:false
        },
        tagName:{
            type: String,
            default: ""
        },
        type:{
            type: String,
            default: ""
        },
    },
    data() {
        return {
            
        }
    },
    methods: {
        go(){
            const that = this;
            let switchObj = {
                'document' :function(){
                    return `/document/${that.data.guid}`
                }
            }
            
            let url = switchObj[this.type]();

            window.open(url)
        },
        cancelCollect(){
            const that = this;
            ShowConfirm('是否要取消收藏', 'warning', function() {
                that.collectHandler(that.data)
            }, function() {})
        },
    },
}
</script>

<style lang="scss" scoped>
@import '@css/var.scss';    

.collect-item{
    .top{
        display: flex;
        justify-content: space-between;

        .title {
            font-weight: 600;
            width: 300px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            cursor: pointer;

            &:hover{
                color: $primaryColor;
            }
        }

        .time-and-icon {
            color: $infoColor;

            .iconfont {
                cursor: pointer;
            }
        }
    }
    .tags {
        margin-top: 8px;
        display: flex;
        justify-content: flex-start;

        .el-tag{
            margin-left: 10px;

            &:first-child{
                margin-left: 0;
            }
        }
    }
    .primary {
        color: #FF7C00;
    }

}
</style>